<template>
  <view class="review-container">
    <!-- 评分统计部分 -->
    <view class="rating-summary">
      <view class="rating-left">
        <view class="average-rating">4.8/5</view>
        <view class="star-rating">
          <u-icon name="star-fill" color="#FFCC33" size="24" v-for="i in 5" :key="i"></u-icon>
        </view>
        <view class="total-reviews">250 条评价</view>
      </view>
      <view class="rating-right">
        <view class="rating-item" v-for="(item, index) in ratingDistribution" :key="index">
          <text class="rating-level">{{ item.level }} 星</text>
          <view class="rating-bar-container">
            <view class="rating-bar" :style="{ width: item.percentage + '%' }"></view>
          </view>
          <text class="rating-percentage">{{ item.percentage }}%</text>
        </view>
      </view>
    </view>
    
    <!-- 写评价按钮 -->
    <view class="write-review-btn" @click="writeReview">
      <text>写评价</text>
    </view>
    
    <!-- 顾客评价列表 -->
    <view class="review-section">
      <view class="section-title">顾客评价</view>
      <view class="review-list">
        <view class="review-item" v-for="(review, index) in reviews" :key="index">
          <view class="review-header">
            <view class="reviewer-info">
              <image class="reviewer-avatar" :src="review.avatar"></image>
              <view class="reviewer-details">
                <text class="reviewer-name">{{ review.name }}</text>
                <text class="review-date">{{ review.date }}</text>
              </view>
            </view>
            <view class="review-rating">
              <text>{{ review.rating }}</text>
              <u-icon name="star-fill" color="#FFCC33" size="16"></u-icon>
            </view>
          </view>
          <view class="review-content">
            {{ review.content }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 页面配置
export default {
  navigationBarTitleText: '评价',
  navigationBarBackgroundColor: '#0c3441',
  navigationBarTextStyle: 'white'
}
</script>

<script setup>
import { ref } from 'vue';

// 评分分布数据
const ratingDistribution = ref([
  { level: 5, percentage: 75 },
  { level: 4, percentage: 10 },
  { level: 3, percentage: 6 },
  { level: 2, percentage: 8 },
  { level: 1, percentage: 3 }
]);

// 评价列表数据
const reviews = ref([
  {
    id: 1,
    name: '用户昵称',
    avatar: '/static/images/avatar/avatar1.png',
    date: '3天前',
    rating: 5.0,
    content: '文字描述信息示例。'
  },
  {
    id: 2,
    avatar: '/static/images/avatar/avatar2.png',
    date: '3天前',
    rating: 5.0,
    content: '文字描述信息示例。'
  },
  {
    id: 3,
    name: '用户昵称',
    avatar: '/static/images/avatar/avatar3.png',
    date: '5天前',
    rating: 4.5,
    content: '服务很好，医生很专业，环境也很干净，宠物很喜欢这里。'
  }
]);

// 写评价
function writeReview() {
  uni.navigateTo({
    url: '/pages/pet/write-review'
  });
}
</script>

<style lang="scss">
page {
  background-color: #f8f8f8;
}

.review-container {
  padding-bottom: 40rpx;
  
  .rating-summary {
    background-color: #ffffff;
    border-radius: 20rpx;
    margin: 30rpx;
    padding: 30rpx;
    display: flex;
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
    
    .rating-left {
      width: 40%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      
      .average-rating {
        font-size: 48rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }
      
      .star-rating {
        display: flex;
        margin-bottom: 10rpx;
      }
      
      .total-reviews {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .rating-right {
      flex: 1;
      padding-left: 20rpx;
      
      .rating-item {
        display: flex;
        align-items: center;
        margin-bottom: 15rpx;
        
        .rating-level {
          width: 70rpx;
          font-size: 24rpx;
          color: #666;
        }
        
        .rating-bar-container {
          flex: 1;
          height: 16rpx;
          background-color: #f0f0f0;
          border-radius: 8rpx;
          margin: 0 20rpx;
          overflow: hidden;
          
          .rating-bar {
            height: 100%;
            background-color: #000;
            border-radius: 8rpx;
          }
        }
        
        .rating-percentage {
          width: 60rpx;
          font-size: 24rpx;
          color: #666;
          text-align: right;
        }
      }
    }
  }
  
  .write-review-btn {
    background-color: #FFCC33;
    color: #333;
    font-size: 32rpx;
    text-align: center;
    padding: 25rpx 0;
    margin: 0 30rpx 30rpx;
    border-radius: 10rpx;
  }
  
  .review-section {
    margin: 0 30rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
    
    .review-list {
      .review-item {
        background-color: #ffffff;
        border-radius: 20rpx;
        padding: 30rpx;
        margin-bottom: 20rpx;
        box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
        
        .review-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20rpx;
          
          .reviewer-info {
            display: flex;
            align-items: center;
            
            .reviewer-avatar {
              width: 80rpx;
              height: 80rpx;
              border-radius: 50%;
              margin-right: 20rpx;
            }
            
            .reviewer-details {
              .reviewer-name {
                font-size: 28rpx;
                font-weight: bold;
                display: block;
              }
              
              .review-date {
                font-size: 24rpx;
                color: #999;
              }
            }
          }
          
          .review-rating {
            display: flex;
            align-items: center;
            
            text {
              font-size: 28rpx;
              font-weight: bold;
              color: #FFCC33;
              margin-right: 5rpx;
            }
          }
        }
        
        .review-content {
          font-size: 28rpx;
          color: #333;
          line-height: 1.5;
        }
      }
    }
  }
}
</style>